<template>
    <div class="my">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card>
                    <template #header>
                        头像信息
                    </template>
                    <div class="avatar">
                        <el-avatar shape="square" :src="userStore.userInfo.avatar" :size="60"></el-avatar>
                        <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleAvatarChange">
                            <template #trigger>
                                <el-button type="primary">选择头像</el-button>
                            </template>
                            <el-button class="ml-3" type="success" @click="submitUpload">
                                上传头像
                            </el-button>
                            <template #tip>
                                <div class="el-upload__tip">
                                    限制上传1张图片，且旧图片将被替换
                                </div>
                            </template>
                        </el-upload>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card>
                    <template #header>
                        个人账户
                    </template>
                    <div class="userInfo">
                        <el-form ref="userForm" :rules="rules" :model="userData" label-width="130px">
                            <el-form-item label="修改密码" prop="password">
                                <el-input type="password" v-model.trim="userData.password" clearable
                                    placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item label="请再次输入密码" prop="confirm_password">
                                <el-input type="password" v-model.trim="userData.confirm_password" placeholder="请再次输入密码"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updateUserInfo">修改</el-button>
                                <el-button type="default" @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { uploadService } from '@/apis/upload';
import { updateAvatarService, updatePasswordService } from '@/apis/user';
import { useUserInfoStore } from '@/stores/userInfo';
import { ElMessage } from 'element-plus';
const userData = ref({
    password: "",
    confirm_password: ""
})
const userStore = useUserInfoStore();
// 表单校验规则
const rules = {
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '密码长度在 5 到 16 个字符', trigger: 'blur' }
    ],
    confirm_password: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '密码长度在 5 到 16 个字符', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== userData.value.password) {
                    callback(new Error('两次输入的密码不一致!'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
}
// 选择头像
const file = ref(null)
const handleAvatarChange = (uploadFile) => {
    file.value = uploadFile;
}
const submitUpload = async () => {
    if (!file.value) {
        ElMessage.error('请选择图片');
        return;
    }
    // 上传头像
    let avatarUrl = await uploadService(file.value.raw, 'admin_avatar');
    // 修改头像
    let res = await updateAvatarService({ avatar: avatarUrl.data.savepath });
    userStore.userInfo.avatar = avatarUrl.data.url;
    ElMessage.success(res.errmsg);
}
// 修改用户信息
const userForm = ref(null)
const updateUserInfo = () => {
    userForm.value.validate(async (valid) => {
        if (!valid) {
            return false;
        }
        let res = await updatePasswordService({ password: userData.value.password });
        // 清空表单
        resetForm();
        ElMessage.success(res.errmsg);
    })
}
// 重置表单
const resetForm = () => {
    userData.value = {
        password: "",
        confirm_password: ""
    }
}
</script>
<style scoped>
.avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 20px;
}

.avatar>div {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: center;
}
</style>